import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/widgets/bottom_sheet/country_codes_bottom_sheet.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';

class PhoneNumberInputField extends StatefulWidget {
  final FocusNode focusNode;
  final TextEditingController controller;
  final bool hasError;
  final String defaultCountryCode;
  final ValueChanged countryCodeCallback;
  final double horizontalPadding;
  final bool hasIcon;
  final bool isBlue;

  const PhoneNumberInputField(
      {Key key,
      this.horizontalPadding,
      this.focusNode,
      this.hasError,
      this.countryCodeCallback,
      this.defaultCountryCode = "+65",
      this.hasIcon = true,
      this.isBlue = false,
      this.controller})
      : super(key: key);

  @override
  _PhoneNumberInputFieldState createState() => _PhoneNumberInputFieldState();
}

class _PhoneNumberInputFieldState extends State<PhoneNumberInputField> {
  bool _hasFocus = false;
  String currentSelectCode;

  @override
  void initState() {
    super.initState();
    currentSelectCode = widget.defaultCountryCode;
    widget.focusNode?.addListener(() {
      if (widget.focusNode.hasFocus) {
        if (_hasFocus == false) {
          if (mounted)
            setState(() {
              _hasFocus = true;
            });
        }
      } else {
        if (_hasFocus == true) {
          if (mounted)
            setState(() {
              _hasFocus = false;
            });
        }
      }
    });
  }

  @override
  void didUpdateWidget(covariant PhoneNumberInputField oldWidget) {
    if (oldWidget.defaultCountryCode != widget.defaultCountryCode) {
      setState(() {
        currentSelectCode = widget.defaultCountryCode;
      });
    }
    super.didUpdateWidget(oldWidget);
  }

  void _onShowCountryCode() async {
    FocusScope.of(context).requestFocus(FocusNode());
    currentSelectCode =
        await showCountryCodesBottomSheet(context, currentSelectCode);
    setState(() {});
    widget.countryCodeCallback?.call(currentSelectCode);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(
          horizontal: widget.horizontalPadding ?? getDp(45),
        ),
        height: widget.hasIcon ? getDp(54) : getDp(65),
        padding: EdgeInsets.symmetric(
          horizontal: getDp(12),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          border: widget.hasError == true
              ? Border.all(
                  color: aceRedColor,
                  width: getDp(1),
                )
              : (_hasFocus == true
                  ? Border.all(
                      color: aceBlueColor,
                      width: getDp(1),
                    )
                  : Border()),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.25),
              blurRadius: getDp(22),
              spreadRadius: -getDp(5),
            ),
          ],
          borderRadius: BorderRadius.circular(getDp(15)),
        ),
        child: Row(
          children: [
            if (widget.hasIcon)
              SvgPicture.asset(
                A.assetsImagesPhone,
                width: getDp(15),
                height: getDp(15),
              ),
            SizedBox(
              width: getDp(15),
            ),
            PressedOpacityButton(
              onPressed: _onShowCountryCode,
              child: Row(
                children: [
                  Text(
                    '$currentSelectCode',
                    style: TextStyle(
                      color: aceBlueColor,
                      fontSize: getSp(16),
                      fontWeight: FontWeight.w700,
                      height: 1,
                    ),
                  ),
                  SizedBox(
                    width: getDp(4),
                  ),
                  SvgPicture.asset(
                    A.assetsImagesStyleArrowBlack,
                    color: aceBlueColor,
                    width: getDp(7),
                    height: getDp(7),
                    fit: BoxFit.contain,
                  ),
                ],
              ),
            ),
            SizedBox(
              width: getDp(12),
            ),
            Container(
              height: getDp(24),
              width: getDp(1),
              color: aceGrayColor,
            ),
            SizedBox(
              width: getDp(15),
            ),
            Expanded(
                child: TextField(
              inputFormatters: [
                LengthLimitingTextInputFormatter(11),
                FilteringTextInputFormatter.digitsOnly,
              ],
              controller: widget.controller,
              focusNode: widget.focusNode,
              scrollPadding: EdgeInsets.zero,
              obscureText: false,
              keyboardType: TextInputType.phone,
              style: TextStyle(
                fontSize: getSp(16),
                color: widget.isBlue ? aceBlueColor : aceBlackColor,
                fontWeight: FontWeight.bold,
              ),
              decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  hintText: S.current.mobile_number,
                  hintStyle: TextStyle(
                    color: widget.hasError == true ? aceRedColor : aceGrayColor,
                    fontWeight: FontWeight.w700,
                    fontSize: getSp(16),
                  )),
            )),
          ],
        ));
  }
}
